<template>
  <div class="consumer_billing_container">
    <div class="customer_container">
      <div class="grey_title_container">
        <span class="indicator"></span>
        <span class="text">客户信息</span>
      </div>
      <div class="customer_content_container form_container">
        <el-row style="display: flex; align-items: center;" :gutter="17">
          <el-col :span="5" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">姓名:</span>
            </div>
            <el-input size="mini" v-model="customerInfo.cfname"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">电话:</span>
            </div>
            <el-input size="mini" disabled v-model="customerInfo.cfhandset"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">年龄:</span>
            </div>
            <el-input size="mini" v-model="customerInfo.cfage"></el-input>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">性别:</span>
            </div>
            <el-select v-model="customerInfo.cfsex" disabled placeholder="请选择" disabled size="mini">
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">会员等级:</span>
            </div>
            <el-select v-model="customerInfo.custLevel" disabled disabled placeholder="请选择" size="mini">
              <el-option
                v-for="item in custLevels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px;" :gutter="17">
          <el-col :span="5" class="item">
            <div class="text_container four_text_width">
              <span class="text">身份证号:</span>
            </div>
            <el-input size="mini" v-model="customerInfo.cfidentyty"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="text">推荐人:</span>
            </div>
            <el-input size="mini" v-model="customerInfo.frecpersonid"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="text">彼此关系:</span>
            </div>
            <el-input size="mini" v-model="customerInfo.recpersonRelation"></el-input>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container four_text_width">
              <span class="text">科室分诊:</span>
            </div>
            <el-select v-model="selectedDept" disabled placeholder="请选择" size="mini">
              <el-option
                v-for="item in depts"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="item" style="justify-content: flex-end;">
            <el-select v-model="selectedDoc" disabled placeholder="请选择" size="mini" style="width: 100%;">
              <el-option
                v-for="item in docs"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 17px;" :gutter="17">
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">意向项目:</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px;" :gutter="17" v-for="(pretend, index) in pretendList" :key="index">
          <el-col :span="13" class="item">
            <div class="text_container four_text_width">
              <el-radio v-model="selectedPretend" :label="index" class="rdo_no_text"></el-radio>
            </div>
            <!--<el-select v-model="selectedPretend" placeholder="请选择" size="mini" style="width: 100%;">-->
            <!--<el-option-->
            <!--v-for="item in pretends"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value">-->
            <!--</el-option>-->
            <!--</el-select>-->
            <el-input disabled size="mini" v-model="pretend.displayname"></el-input>
          </el-col>
          <el-col :span="9" class="item">
            <el-input size="mini" placeholder="备注" v-model="pretend.remark"></el-input>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="selected_products_container">
      <div class="grey_title_container table_title">
        <div class="left">
          <span class="indicator"></span>
          <span class="text">已选产品</span>
        </div>
        <div class="right">
          <el-button size="small" type="primary" plain>明细试图</el-button>
          <el-button size="small" type="primary" plain @click="addPackage">新增套餐</el-button>
          <el-button size="small" type="primary" plain @click="addProduct">新增产品</el-button>
          <el-button size="small" type="primary" plain>新增项目</el-button>
          <el-button size="small" type="primary" plain>特价申请</el-button>
          <el-button size="small" type="primary" plain>欠款申请</el-button>
          <el-button size="small" type="danger" plain>删除</el-button>
        </div>
      </div>
      <div class="table_container">
        <el-table
          @selection-change="selectedItemSelectionChange"
          :data="selectedItems"
          :span-method="calProductSpan"
          :border="true">
          <el-table-column
            type="selection"
            fixed
            width="35">
          </el-table-column>
          <el-table-column
            label="项目名称"
            align="center">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.type === 1">
                  <span class="cell">{{scope.row.productName}}</span>
                </div>
                <div v-if="scope.row.type === 0">
                  <span class="cell">订单备注</span>
                </div>
                <div v-if="scope.row.type === 2" style="text-align: right;">
                  <span class="cell">共应付金额：</span>
                  <span style="color: #ff5757; font-size: 18px;">￥{{scope.row.total}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="项目类型"
            align="center">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.type === 1">
                  <span class="cell">{{scope.row.productType}}</span>
                </div>
                <div v-if="scope.row.type === 0">
                  <span class="cell">{{scope.row.memo}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="项目个数"
            align="center"
            prop="productNum"/>
          <el-table-column
            label="原价"
            align="center"
            prop="oldPrice"/>
          <el-table-column
            label="最终价格"
            align="center"
            prop="finalPrice"/>
          <el-table-column
            label="是否需要面诊"
            align="center"
            prop="needFace"/>
          <el-table-column
            label="备注"
            width="350"
            align="center"
            prop="memo"/>
        </el-table>
      </div>
    </div>
    <div class="operator_container">
      <el-button type="primary" style="padding-left: 45px; padding-right: 45px; margin-right: 15px;" @click="submit(1)">
        保存
      </el-button>
      <el-button type="success" style="padding-left: 45px; padding-right: 45px; margin-left: 15px;" @click="submit(2)">
        提交收银
      </el-button>
    </div>
  </div>
</template>

<script>
  import {Component, Emit, Inject, Model, Prop, Provide, Vue, Watch} from 'vue-property-decorator'

  @Component
  export default class ConsumerBilling extends Vue {

    @Prop([String])
    registerId;

    isLoading = false;

    sexOptions = [{value: '1', label: '男'}, {value: '0', label: '女'}];
    custLevels = [];
    depts = [];
    docs = [];
    pretends = [{value: '1', label: '整容中心'}];
    selectedDept = '';
    selectedDoc = '';
    selectedPretend = '';
    selectedItems = [];
    checkedSelectedItems = [];
    // products = [{
    //   productName: '麻醉费',
    //   productType: '产品',
    //   productNum: '1',
    //   oldPrice: '298800.00',
    //   finalPrice: '19800.00',
    //   needFace: '是',
    //   memo: '以优惠申请',
    //   type: 1
    // }, {
    //   memo: '赠送两次超声逆龄提拉两次，第一次手术时间预计八月十二日',
    //   type: 0
    // }, {
    //   total: '35890.00',
    //   type: 2
    // }];
    customerInfo = {};
    pretendList = [];

    created() {
      console.log('created');
      this.initSelectedItems();
      this.getBillingInfo();
    }

    initSelectedItems() {
      for (let product of this.$store.state.ConsumerBilling.selectedProducts) {
        this.selectedItems.push({
          id: product.productid,
          productName: product.productname,
          productType: '产品',
          productNum: product.productcount,
          oldPrice: product.productprice,
          finalPrice: product.productprice2,
          needFace: '未知',
          memo: '',
          submitType: 1,
          type: 1
        });
      }
      for (let _package of this.$store.state.ConsumerBilling.selectedPackages) {
        this.selectedItems.push({
          id: _package.pkgid,
          productName: _package.pkgname,
          productType: '套餐',
          productNum: 1,
          oldPrice: _package.price,
          finalPrice: _package.price,
          needFace: '未知',
          memo: '',
          submitType: 2,
          type: 1
        });
      }
    }

    calProductSpan({row, column, rowIndex, columnIndex}) {
      if (row.type === 0) { // 订单备注
        if (columnIndex === 1) {
          return [1, 2];
        } else if (columnIndex === 2) {
          return [1, 6];
        } else {
          return [0, 0];
        }
      }
      if (row.type === 2) { // 合计
        if (columnIndex === 1) {
          return [1, 8];
        } else {
          return [0, 0];
        }
      }
      return [1, 1];
    }

    selectedItemSelectionChange(selection) {
      this.checkedSelectedItems = selection;
    }

    /**
     * 获取开单信息
     */
    getBillingInfo() {
      this.$ajax({
        method: 'get',
        url: '/billing/billingDetail.do',
        params: {
          registerId: this.registerId
        }
      }).then(resp => {
        this.isLoading = false;
        if (resp.data.code === 200) {
          this.customerInfo = resp.data.data.customerInfo;
          this.custLevels.push({value: this.customerInfo.custLevel, label: this.customerInfo.custLevel});
          this.pretendList = resp.data.data.itemListList;
        } else {
          this.$notify.showWarning('获取数据异常');
        }
      }, error => {
        this.isLoading = false;
        this.$notify.showWarning('获取数据异常');
      });
    }

    /**
     * 跳转到添加产品
     */
    addProduct() {
      this.$router.push({name: 'AddProduct'});
    }

    /**
     * 跳转到添加套餐
     */
    addPackage() {
      this.$router.push({name: 'AddPackage'});
    }

    /**
     * 点击提交收银
     */
    submit(state) {
      if (this.checkedSelectedItems.length === 0) {
        this.$notify.showWarning('请选择要提交的数据');
        return;
      }
      let allItems = [];
      for (let item of this.selectedItems) {
        allItems.push({
          type: item.submitType,
          id: item.id,
          num: item.productNum
        });
      }
      this.$ajax({
        method: 'post',
        url: '/billing/billingOperation.do',
        data: this.$qs.stringify({
          registerId: this.registerId,
          cfname: this.customerInfo.cfname,
          cfhandset: this.customerInfo.cfhandset,
          cfidentyty: this.customerInfo.cfidentyty,
          cfage: this.customerInfo.cfage,
          cfsex: this.customerInfo.cfsex,
          fchargestate: state,
          jsonArrayStr: JSON.stringify(allItems)
        })
      }).then(resp => {
        if (resp.data.code === 200) {
          this.$notify.showSuccess('提交成功');
          this.$router.go(-1);
        } else {
          this.$notify.showWarning('提交异常');
        }
      }, error => {
        this.$notify.showWarning('提交异常');
      });
    }
  }
</script>

<style scoped>
  .customer_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .customer_content_container {
    padding: 15px 9px 15px 9px;
  }

  .table_title {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .operator_container {
    margin-top: 29px;
    text-align: center;
  }

</style>
